<%@include file="/WEB-INF/common/taglibs.jsp"%>
<link rel="STYLESHEET" type="text/css"
	href="${ctx}/resources/plugin/dhtmlxTree/dhtmlxtree.css">
<script src="${ctx}/resources/plugin/dhtmlxTree/dhtmlxcommon.js"></script>
<script src="${ctx}/resources/plugin/dhtmlxTree/dhtmlxtree.js"></script>
<script src="${ctx}/resources/plugin/dhtmlxTree/ext/dhtmlxtree_ed.js"></script>
<script src="${ctx}/resources/plugin/dhtmlxTree/ext/dhtmlxtree_kn.js"></script>
<script
	src="${ctx}/resources/plugin/dhtmlxTree/ext/dhtmlxtree_dragin.js"></script>
<script src="${ctx}/resources/plugin/dhtmlxTree/ext/dhtmlxtree_json.js"></script>
<script src="${ctx}/resources/plugin/dhtmlMenu/dhtmlxmenu.js"></script>
<script src="${ctx}/resources/plugin/dhtmlMenu/ext/dhtmlxmenu_ext.js"></script>
<script type="text/javascript" src="/ckfinder/ckfinder.js"></script>
<link rel="stylesheet" type="text/css"
	href="${ctx}/resources/plugin/dhtmlMenu/skins/dhtmlxmenu_dhx_skyblue.css">
<script type="text/javascript">
	var tree

	$(document)
			.ready(
					function() {

						var drop_target;
						var right_click;
						var cache_value;
						var menu1 = new dhtmlXMenuObject();
						tree = new dhtmlXTreeObject("treeboxbox_tree", "100%",
								"100%", 0);
						menu1.renderAsContextMenu();
						menu1
								.setIconsPath("${ctx}/resources/plugin/common/imgs/");
						menu1.addNewChild(menu1.topId, 0, "i18n", "I18N",
								false, "opens.gif");
						menu1.addNewChild(menu1.topId, 1, "open", "Open",
								false, "opens.gif");
						menu1.addNewChild(menu1.topId, 2, "edit", "Edit",
								false, "edit.gif");
						menu1.addNewChild(menu1.topId, 3, "edit-attr",
								"Edit Attritbue", false,
								"icon-edit-attritbue.png");
						menu1.addNewChild(menu1.topId, 4, "up", "Up", false,
								"up.gif");
						menu1.addNewChild(menu1.topId, 5, "down", "Down",
								false, "down.gif");
						menu1.addNewChild(menu1.topId, 6, "delete", "Delete",
								false, "delete.gif");
						menu1.attachEvent("onClick", function(id, zoneId) {
							if ('up' === id) {
								tree.moveItem(right_click, 'up');
							} else if ('down' === id) {
								tree.moveItem(right_click, 'down');
							} else if ('delete' === id) {
								deleteMenu(right_click);
							} else if ('open' === id) {
								openMenu(right_click);
							} else if ('edit' === id) {
								editMenu(right_click);
							} else if ('i18n' === id) {
								showLanguage(right_click);
							} else if ('edit-attr' === id) {
								editMenuAttr(right_click);
							}
						});
						tree.enableContextMenu(menu1);
						tree.setSkin('dhx_skyblue');
						tree
								.setImagePath("${ctx}/resources/plugin/dhtmlxTree/imgs/csh_vista/");
						tree.enableDragAndDrop(1);
						tree.enableDragAndDrop(true);
						tree.enableItemEditor(true);
						tree.setDragHandler(tondrag);

						tree.enableKeyboardNavigation(true);
						tree.setDataMode("json");
						tree
								.attachEvent(
										"onDrop",
										function(sId, tId, id, sObject, tObject) {
											var childrens = tree.Fx(tId);

											var rank = new Array();
											$
													.each(
															childrens
																	.split(','),
															function(index,
																	value) {

																if (tId == tree
																		.getParentId(value)) {
																	rank
																			.push(value);
																}
															});

											$
													.ajax({
														url : "${ctx}/admin/menu/"
																+ tId
																+ "/rank/",
														type : "POST",
														data : {
															'rank' : rank
														},
														dataType : "json",
														success : function(data) {
															if (data
																	&& data.state
																	&& (data.state
																			.indexOf("ERROR") != -1)) {
																johnny
																		.error(data.message);
																return;
															} else {
																johnny
																		.info("update menu name successfully");
															}
														}
													});

										});
						tree.attachEvent("onRightClick", function(id, object) {
							right_click = id;
						});
						tree
								.attachEvent(
										"onEdit",
										function(state, id, tree, value) {
											if (id < 0) {
												return value;
											}
											if (state == 0) {
												cache_value = value;
												return value;
											}
											if (state == 2
													&& value != cache_value) {
												$
														.ajax({
															url : "${ctx}/admin/menu/"
																	+ id
																	+ "/edit/",
															type : "POST",
															data : {
																'name' : value
															},
															dataType : "json",
															success : function(
																	data) {
																if (data
																		&& data.state
																		&& (data.state
																				.indexOf("ERROR") != -1)) {
																	johnny
																			.error(data.message);
																	return;
																} else {
																	johnny
																			.info("update menu name successfully");
																}
															}
														});

											}
											return value;
										});
						tree
								.loadJSON("${ctx}/admin/menu-group/${menuGroup.id}/tree/");
						$('#confirmMenu')
								.click(
										function() {

											var parentId = $('#parentId').val();
											if (parentId < 0) {

												parentId = 0;
											}
											var index = tree
													.hasChildren(parentId) + 1;
											$('#rankOrder').val(index);
											$
													.ajax({
														url : "${ctx}/admin/menu/create/",
														type : "PUT",
														data : $('#menuForm')
																.serialize(),
														dataType : "json",
														success : function(data) {
															if (data
																	&& data.state
																	&& (data.state
																			.indexOf("ERROR") != -1)) {
																johnny
																		.error(data.message);
																return;
															} else {
																tree
																		.deleteItem(-1);

																var entity = data.entity;
																var pid = 0;
																if (entity.father) {
																	pid = entity.father.id;
																}
																tree
																		.insertNewItem(
																				pid,
																				entity.id,
																				entity.name,
																				0,
																				0,
																				0,
																				0,
																				"SELECT,CALL");
																$("#newGroup")
																		.modal(
																				'hide');
																johnny
																		.info("create new menu successfully");
															}
														}
													});

										});

						$('#confirmEdit')
								.click(
										function() {
											var id = $("#editMenu").attr("tid");
											var url = "${ctx}/admin/menu/" + id
													+ "/edit/";
											$
													.ajax({
														url : url,
														type : "POST",
														data : $("#editForm")
																.serialize(),
														dataType : "json",
														success : function(data) {
															if (data
																	&& data.state
																	&& (data.state
																			.indexOf("ERROR") != -1)) {
																johnny
																		.error(data.message);
																return;
															} else {
																$("#editMenu")
																		.modal(
																				'hide');
																johnny
																		.info("modify menu successfully");
															}
														}
													});

										});

						$('#confirmLanguage')
								.click(
										function() {
											var menuId = $('#menuId').val();
											var ids = new Array();
											var values = new Array();
											$('.language')
													.each(
															function() {
																var val = $(
																		this)
																		.val();
																if (val) {
																	ids
																			.push($(
																					this)
																					.attr(
																							'name'));
																	values
																			.push(val);
																}
															});
											var url = "${ctx}/admin/menu/"
													+ menuId + "/language/";
											$
													.ajax({
														url : url,
														type : "POST",
														data : {
															'ids' : ids,
															'values' : values
														},
														dataType : "json",
														success : function(data) {
															if (data
																	&& data.state
																	&& (data.state
																			.indexOf("ERROR") != -1)) {
																johnny
																		.error(data.message);
																return;
															} else {
																$("#languages")
																		.modal(
																				'hide');
																johnny
																		.info("modify menu  language successfully");
															}
														}
													});

										});

					});

	function deleteMenu(id) {
		var url = "${ctx}" + "/admin/menu/" + id + "/delete/";
		$.ajax({
			url : url,
			type : "DELETE",
			dataType : "json",
			success : function(data) {
				if (data && data.state && (data.state.indexOf("ERROR") != -1)) {
					johnny.success(data.message);
					return;
				} else {
					tree.deleteItem(id, true);
					johnny.info("update menu  successfully");
				}
			}
		});

	}

	function openMenu(id) {
		var url = "${ctx}" + "/admin/menu/" + id + "/url/";
		$
				.ajax({
					url : url,
					type : "GET",
					dataType : "json",
					success : function(data) {
						if (data && data.state
								&& (data.state.indexOf("ERROR") != -1)) {

							return;
						} else {
							var viewOrderUrl = mnc.ctx + "/" + data.entity;

							window
									.open(viewOrderUrl, "View Index",
											"scrollbars=no,toolbar=no,menubar=no,resizable=yes");
						}
					}
				});

	}
	function editMenuAttr(id) {
		var url = "${ctx}" + "/admin/menu/" + id + "/edit/";
		$.ajax({
			url : url,
			type : "GET",
			dataType : "json",
			success : function(data) {
				if (data && data.state && (data.state.indexOf("ERROR") != -1)) {

					return;
				} else {
					var entity = data.entity;
					$("#editMenu").attr("tid", id);
					$("#editMenu").find("div.modal-body").find(
							"input,select,textarea,checkbox").not(
							"[name=action],[type=hidden]").each(
							function(step, value) {

								var name = $(value).attr("name");

								if ($(value).is(':radio')) {
									console.dir(entity[name] + "  "
											+ $(value).val());

									if ("" + entity[name] === ""
											+ $(value).val()) {
										$(value).attr("checked", "checked");
									} else {
										$(value).removeAttr("checked");

									}
									$(value).uniform();

								} else {

									if (entity[name] || entity[name] === 0) {
										$(value).val(entity[name]);
										$(value).uniform();
									} else if (name.match(/Id$/)) {
										var pro = name.substring(0,
												name.length - 2);
										if (entity[pro] && entity[pro].id) {
											$(value).val(entity[pro].id);
											$(value).uniform();
										}

									} else {
										$(value).val("");
									}
								}
								$("#editMenu").modal('show');

							});

				}
			}
		});
	}
	function editMenu(id) {
		var url = "${ctx}" + "/admin/menu/" + id + "/url/";
		$
				.ajax({
					url : url,
					type : "GET",
					dataType : "json",
					success : function(data) {
						if (data && data.state
								&& (data.state.indexOf("ERROR") != -1)) {

							return;
						} else {
							var viewOrderUrl = mnc.ctx + "/LG-en"
									+ "/24k-editor/" + data.entity + "/";

							window
									.open(viewOrderUrl, "View Index",
											"scrollbars=no,toolbar=no,menubar=no,resizable=yes,height=400, width=400");
						}
					}
				});

	}

	function showLanguage(id) {
		$("#menuId").val(id);
		$.ajax({
			url : "${ctx}" + "/admin/menu/" + id + "/language/",
			type : "GET",
			dataType : "json",
			success : function(data) {
				if (data && data.state && (data.state.indexOf("ERROR") != -1)) {
					johnny.success(data.message);
					return;
				} else {
					$('.language').each(function() {
						var val = $(this).val('');
					});
					$.each(data.entity, function(val, index) {
						$('#lg-' + this.language.lg).val(this.name);
					});
					$("#languages").modal('show');
				}
			}
		});

	}

	function newMenu(drop_obj, source_id, target_on, target_before, target_now) {
		$('#parentId').val(target_on);
		var target = $('#' + source_id);
		var channelId = target.attr("channel-id");
		$('#channelId').val(target.attr("channel-id"));
		$('#menu-name').val(target.attr("channel-name"));
		if (channelId == -1) {
			$("#link-div").removeClass('hide');
			$('.cke').val('#');
		} else {
			$("#link-div").addClass('hide');
		}
		$("#newGroup").modal('show');

	}

	function tondrag(id, id2) {
		var child = id;
		var parent = id2;

		var url = "${ctx}" + "/admin/menu/" + id + "/edit/" + parent;
		$.ajax({
			url : url,
			type : "PUT",
			dataType : "json",
			success : function(data) {
				if (data && data.state && (data.state.indexOf("ERROR") != -1)) {
					johnny.success(data.message);
					return;
				} else {
					johnny.info("update menu  successfully");
				}
			}
		});
		return true;
	};

	$(document).ready(function() {

		if ($('table').hasClass('menuTable')) {
			$('.menuTable').dataTable({

				"sPaginationType" : "bootstrap",
				"bJQueryUI" : false,
				"bAutoWidth" : false,
				"fnDrawCallback" : function(oSettings) {
					tree.makeAllDraggable(newMenu);
				},
				"oLanguage" : {
					"sSearch" : "<span>Filter:</span> _INPUT_",
					"sLengthMenu" : "<span>_MENU_</span>",
					"oPaginate" : {
						"sFirst" : "First",
						"sLast" : "Last"
					}
				}
			});
			$('.dataTables_length select').uniform();
		}

	});
</script>

<div class="row-fluid">
	<div class="span12">
		<div class="centerContent">
			<div class="span12">

				<div id="treeboxbox_tree" class="span4" style="min-height: 200px;"></div>
				<div class="span7">
					<div class="box gradient">
						<div class="title">
							<h4>
								<span>Channels </span>
							</h4>

							<a href="#" class="minimize">Minimize</a>
						</div>

						<div class="content scrollable clearfix">
							<table class="menuTable  display table table-bordered">
								<thead>
									<tr>
										<th><span class="icon12 icomoon-icon-move"></span></th>
										<th>Path</th>
										<th>Parallax Scrolling</th>
									</tr>
								</thead>
								<tbody>
									<c:set var="allEntity" value="${channels}" />
									<tr>
										<td><div class="controls" dragInDhtmlXTree="true"
												id="channel_null" channel-name="empty" channel-id="-1">
												<span class="icon12 icomoon-icon-move"></span>
											</div></td>
										<td></td>
										<td></td>
									</tr>


									<c:if test="${allEntity!=null}">
										<c:forEach var="entity" items="${allEntity}">
											<tr>
												<td><div class="controls" dragInDhtmlXTree="true"
														id="channel_${entity.id}" channel-name="${entity.name}"
														channel-id="${entity.id}">
														<span class="icon12 icomoon-icon-move">
															${entity.name}</span>
													</div></td>
												<td>${entity.path}</td>
												<td>${entity.parallaxScrolling}</td>
											</tr>
										</c:forEach>
									</c:if>
								</tbody>
							</table>
						</div>
					</div>
				</div>
			</div>


		</div>
	</div>
</div>

<div id="editMenu" class="modal hide fade" style="display: none;">
	<div class="modal-header">
		<button type="button" class="close" data-dismiss="modal">
			<span class="icon12 minia-icon-close"></span>
		</button>
		<h3>Edit Menu</h3>
	</div>
	<div class="modal-body">
		<form method="post" id="editForm">

			<input type="hidden" id="edit-method" name="_method" value="PUT">
			<div class="form-row row-fluid">
				<label class="form-label span4">Name</label> <input id="edit-name"
					class="span8" name="name" />
			</div>


			<div class="form-row row-fluid">
				<label class="form-label span4">CssClass</label> <input
					id="menu-name" class="span8" name="cssClass" />
			</div>
			<div class="form-row row-fluid">
				<label class="form-label span4">Picture</label> <input
					id="menu-name" class="span8 ckfile" name="picture" />
			</div>
			<div id="edit-link-div" class="form-row row-fluid">
				<label class="form-label span4">Link</label> <input id="edit-link"
					class="span8 ckfile cke" name="link" />
			</div>
			<!--visible -->
			<div class="form-row row-fluid">
				<div class="span12">
					<div class="row-fluid">
						<label class="form-label span4" for="visible">Visible :</label>
						<div class="left marginT5 marginR10">
							<div class="radio" id="uniform-visible1">
								<span class="<c:if test="${entity.visible }">checked</c:if>"><input
									type="radio" name="visible" id="visible1" value="true"
									<c:if test="${entity.visible}">checked="checked"</c:if>
									style="opacity: 0;"></span>
							</div>
							True
						</div>
						<div class="left marginT5 marginR10">
							<div class="radio" id="uniform-visible2">
								<span class="<c:if test="${!entity.visible}">checked</c:if>"><input
									type="radio"
									<c:if test="${!entity.visible}">checked="checked"</c:if>
									name="visible" id="visible2" value="false" style="opacity: 0;"></span>
							</div>
							False
						</div>
					</div>
				</div>
			</div>
		</form>
	</div>
	<div class="modal-footer">
		<a href="#" class="btn" data-dismiss="modal">Close</a> <a href="#"
			id="confirmEdit" class="btn btn-primary">Save changes</a>
	</div>
</div>




<div id="newGroup" class="modal hide fade" style="display: none;">
	<div class="modal-header">
		<button type="button" class="close" data-dismiss="modal">
			<span class="icon12 minia-icon-close"></span>
		</button>
		<h3>New Menu</h3>
	</div>
	<div class="modal-body">
		<form method="post" id="menuForm">
			<input type="hidden" name="menuGroupId" value="${menuGroup.id}">
			<input id="parentId" type="hidden" name="parentId"> <input
				id="channelId" type="hidden" name="channelId"> <input
				id="rankOrder" type="hidden" name="rankOrder">
			<div class="form-row row-fluid">
				<label class="form-label span4">Name</label> <input id="menu-name"
					class="span8" name="name" />
			</div>
			<div class="form-row row-fluid">
				<label class="form-label span4">CssClass</label> <input
					id="menu-name" class="span8" name="cssClass" />
			</div>
			<div class="form-row row-fluid">
				<label class="form-label span4">Picture</label> <input
					id="menu-name" class="span8" name="picture" />
			</div>
			<div id="link-div" class="form-row row-fluid hide">
				<label class="form-label span4">Link</label> <input id="menu-link"
					class="span8 ckfile cke" name="link" />
			</div>
						<div class="form-row row-fluid">
				<div class="span12">
					<div class="row-fluid">
						<label class="form-label span4" for="visible">Visible :</label>
						<div class="left marginT5 marginR10">
							<div class="radio" id="uniform-visible1">
								<span class="<c:if test="${entity.visible }">checked</c:if>"><input
									type="radio" name="visible" id="visible1" value="true"
									<c:if test="${entity.visible}">checked="checked"</c:if>
									style="opacity: 0;"></span>
							</div>
							True
						</div>
						<div class="left marginT5 marginR10">
							<div class="radio" id="uniform-visible2">
								<span class="<c:if test="${!entity.visible}">checked</c:if>"><input
									type="radio"
									<c:if test="${!entity.visible}">checked="checked"</c:if>
									name="visible" id="visible2" value="false" style="opacity: 0;"></span>
							</div>
							False
						</div>
					</div>
				</div>
			</div>
		</form>
	</div>
	<div class="modal-footer">
		<a href="#" class="btn" data-dismiss="modal">Close</a> <a href="#"
			id="confirmMenu" class="btn btn-primary">Save changes</a>
	</div>
</div>

<c:set var="allLanguage" value="${requestScope.languages}" />
<c:if test="${allLanguage!=null}">
	<div id="languages" class="modal hide fade" style="display: none;">
		<div class="modal-header">
			<button type="button" class="close" data-dismiss="modal">
				<span class="icon12 minia-icon-close"></span>
			</button>
			<h3>Language setting</h3>
		</div>
		<div class="modal-body">
			<form method="post" id="menuForm">
				<input type="hidden" id="menuId" name="menuId">
				<c:forEach var="entity" items="${allLanguage}">
					<div class="form-row row-fluid">
						<label class="form-label span4">${entity.language}</label> <input
							id="lg-${entity.lg}" class="span8 language" name="${entity.id}" />
					</div>
				</c:forEach>
			</form>
		</div>
		<div class="modal-footer">
			<a href="#" class="btn" data-dismiss="modal">Close</a> <a href="#"
				id="confirmLanguage" class="btn btn-primary">Save changes</a>
		</div>
	</div>
</c:if>